<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body class="df fdcolum">
    <main class="flex overflow">
        <!-- 用户名 -->
        <div class="userName bcfff">
            <a href="./personal.html" class="inner df jcbetween aicenter">
                <div class=" df aicenter">
                    <img class="avatar" id="avatar" src="#" />
                    <p id="nickname" style="margin-left:10px;font-weight: bold;"></p>
                </div>
                <div class="iconfont icon-xiayiye1"></div>
            </a>
            <div class="sign f14">个性签名:&nbsp;<span id="sign"></span></div>
        </div>
        <!-- 累计打卡 -->
        <div class="df jcbetween clockTotal mt20 bcfff">
            <div class="clockTotal-l">
                <i class="iconfont icon-rili" style="color:rgb(53, 189, 243); font-size: 25px;"></i>
                累计打卡
                <span class="clockDayTotal" id="clockDay" style="color:rgb(53, 189, 243); font-size: 25px;"></span>天
            </div>
            <div class="clockBtn" id="clockBtn"></div>
        </div>
        <!-- 个人动态 -->
        <div class="df jcbetween dynamic mt20 bcfff">
            <div class="f16">
                <i class="iconfont icon-caidan" style="color:rgb(53, 189, 243);font-size: 25px;"></i>个人动态
            </div>
            <div>
                <span id="dynamicCount"></span>条
                <i class="iconfont icon-xiayiye1"></i>
            </div>
        </div>
        <!-- 运动数据 -->
        <div class="df fdc sportData mt20 bcfff">
            <div class="df jcbetween">
                <div>
                    <i class="iconfont icon-tongji" style="color:rgb(53, 189, 243);font-size: 20px;"></i>
                    <span>运动数据</span>
                </div>
                <div>
                    <i class="iconfont icon-xiayiye1"></i>
                </div>
            </div>
            <div class="df jcaround totalData">
                <div class="sportTotal">
                    <p style="color:#888;font-size: 13px;">总运动</p>
                    <p class="mt20"><span id="meter" style="color:rgb(53, 189, 243);font-size: 25px;"></span>分钟</p>
                </div>
                <div class="dashed"></div>
                <div>
                    <p style="color:#888;font-size: 13px;">本周消耗</p>
                    <p class="mt20"><span id="calorie" style="color:rgb(53, 189, 243);font-size: 25px;"></span>千卡</p>
                </div>
            </div>
        </div>
        <!-- 运动徽章 -->
        <div class="df fdc sportBadge mt20 bcfff mb20">
            <div class="df jcbetween sportBadge-bottom">
                <div>
                    <i class="iconfont icon-huizhang" style="color:rgb(53, 189, 243);font-size: 20px;"></i>
                    <span>我的运动徽章</span>
                </div>
                <span class="iconfont icon-xiayiye1"></span>
            </div>
            <div class="badgeTotal df jcaround frap" id="badgeBox">
                <div class="flex"><img src="../../assets/imgs/mybadge01.jpg" alt=""></div>
                <div class="flex"><img src="../../assets/imgs/mybadge02.jpg" alt=""></div>
                <div class="flex"><img src="../../assets/imgs/mybadge03.jpg" alt=""></div>
            </div>
        </div>
    </main>

</body>

</html>